<template>
    <div class="home">
        <div class="box">
            <h2>Gitalk 评论插件 <div class="btn mg-btn primary mini" @click="handleTheme"><MgIcon name="fa-dashboard"/>主题</div></h2>
            <p class="dsc">🚲 一款基于Github Issue 和Preact 开发的评论插件 <span><a  target="_blank" href="https://gitee.com/Z568_568/vue-gitalk">本例源码</a></span></p>

            <div id="gitalk-container"></div>
        </div>
        <MgFooter/>
    </div>
</template>

<script>
    import 'gitalk/dist/gitalk.css'
    import Gitalk from 'gitalk'
    import MgFooter from "../components/MgFooter";
    import MgIcon from "../components/MgIcon";

    export default {
        name: 'Home',
        components: {MgIcon, MgFooter},
        data() {
            return {
                idx:0
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            /**
             * 申请授权key:https://github.com/settings/developers
             * 配置文档key:https://github.com/gitalk/gitalk/blob/master/readme-cn.md
             * */
            init() {
                let gitalk = new Gitalk({
                    clientID: 'e5157b52dc106dfad413',
                    clientSecret: 'b8d3007a9d92ad6ae4a44eaff6fb29240cf74553',
                    repo: 'gitalk_demo', ///用于存放评论内容的仓库  只是仓库名  不是地址哦
                    owner: 'ZHYI-source', // 你的github 用户名
                    admin: ['ZHYI-source'],
                    id: 'home_comments', //这里我们可以写到每个页面的唯一值 演示我是随便写  具体可以根据需求改
                    perPage:15, //每次加载的数据大小，最多 100。
                    labels:['演示'],//Default: ['Gitalk'].GitHub issue 的标签。
                    title:'Gitalk 评论',
                    distractionFreeMode: true,  // 类似Facebook评论框的全屏遮罩效果.
                    pagerDirection:'first', //评论排序方式， last为按评论创建时间倒叙，first为按创建时间正序。
                })
                gitalk.render('gitalk-container')
            },


            handleTheme(){
                let themeColor=['aliceblue','antiquewhite','beige','bisque']
                if (this.idx<themeColor.length){
                    this.$store.commit('SET_THEME',themeColor[this.idx])
                }else {
                    this.idx=0
                    this.$store.commit('SET_THEME',themeColor[this.idx])
                }

                this.idx++

            }
        }

    }
</script>
<style lang="scss">
    .box {
        max-width: 1000px;
        min-width: 300px;
        margin: auto;
        box-sizing: border-box;
        padding: 20px;
        .dsc {
            font-size: 13px;
            padding: 8px;
            a {
                color: #42b983;
            }
        }
        h2 {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .btn {
                margin-left: 15px;
            }
        }
    }
    .gt-container .gt-btn {
        background-color: $color-primary;
        border: none;
        transition: all .1s linear;
        &:hover {
            background-color: rgba($color-primary,.5);
        }
    }
    .gt-container .gt-btn-preview {
        transition: all .1s linear;
        background-color:$color-bg-su;
        color: #ffffff;

    }
    .markdown-body {
        font-size: 13px!important;
    }
    .gt-container .gt-header-controls-tip {
        font-size: 12px;
    }
    .gt-container .gt-comment-username {
        color:$color-primary;
    }
    .gt-container .gt-comment-date,.gt-container .gt-comment-text {
        font-size: 12px;
    }
    .gt-container a {
        color:$color-primary;
        text-decoration: none;
    }
    .gt-container a:hover {
        border: none;
    }
</style>
